<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :gutter="24" :style="{ marginBottom: '24px' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="3" :sm="24">
              <a-form-item label="年度">
                <a-date-picker
                  placeholder="请选择年"
                  mode="year"
                  v-model="queryParam.projectYear"
                  :open="dataopen"
                  format="YYYY"
                  :allowClear="false"
                  @openChange="openChangeYear"
                  @panelChange="panelChangeYear"
                />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="题目来源">
                <a-input v-model="queryParam.projectSource" placeholder="请输入项目来源"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="题目类型">
                <a-select v-model="queryParam.typeId" placeholder="请选择">
                  <a-select-option v-for="(obj, index) in selectData.three" :key="index" :value="obj.code">{{ obj.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="承担单位">
                <a-select v-model="queryParam.companyId" placeholder="请选择">
                  <a-select-option v-for="(obj, index) in selectData.one" :key="index" :value="obj.code">{{ obj.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getData()">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => {queryParam = {};getData()}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总项目数" :total="data.allCount+'个'">
          <a-tooltip title="所筛选项目总数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="已完成项目数" :total="data.overCount+'个'">
          <a-tooltip title="所筛选已完成项目数总数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总金额" :total="data.allMoney+'万元'">
          <a-tooltip title="所筛选项目总金额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="开支金额" :total="data.overMoney+'万元'">
          <a-tooltip title="所筛选项目开支金额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="完成率" :style="{ height: '100%' }">
            <div>
              <div>
                <v-chart :force-fit="true" :height="405" :data="pieData1" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="item*percent" />
                  <v-axis />
                  <v-legend dataKey="item"/>
                  <v-pie position="percent" color="item" :vStyle="pieStyle" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>

            </div>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="执行率" :style="{ height: '100%' }">
            <div>
              <div>
                <v-chart :force-fit="true" :height="405" :data="pieData2" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="item*percent" />
                  <v-axis />
                  <v-legend dataKey="item"/>
                  <v-pie position="percent" color="item" :vStyle="pieStyle" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>

            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { getUrl,postAxiosUrl } from '@/api/manage'
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'

const DataSet = require('@antv/data-set')
const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]
export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    moment
  },
  data () {
    return {
      loading: false,
      pieScale,
      pieData1:null,
      pieData2:null,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      selectData:{},
      queryParam:{},
      dataopen:false,
      data:{}
    }
  },
  created () {
    // setTimeout(() => {
    //   this.loading = !this.loading
    // }, 1000)
    this.getSelectData()
    this.getData()
  },
  methods:{
    getSelectData(params = {}) {
      var _this = this
      getUrl('projectInfo/getAllSelect', params)
        .then(res => {
          console.log(res)
          _this.selectData = res.result
        })
        
    },
    getData(params = {}) {
      var _this = this
      this.loading = true
      params['projectYear']=_this.queryParam.projectYear?_this.queryParam.projectYear.format('YYYY'):''
      params['projectSource']=_this.queryParam.projectSource
      params['typeId']=_this.queryParam.typeId
      params['companyId']=_this.queryParam.companyId
      getUrl('projectInfo/getChartData', params)
        .then(res => {
          console.log(res)
          _this.loading = false
          _this.data = res.result

          var allCount = res.result.allCount
          var overCount = res.result.overCount
          var allMoney = res.result.allMoney
          var overMoney = res.result.overMoney

          const sourceData1 = [
            { item: '已完成项目', count: (overCount/allCount)*100 },
            { item: '未完成项目', count: 100-(overCount/allCount)*100 },
          ]
          const dv1 = new DataSet.View().source(sourceData1)
          dv1.transform({
            type: 'percent',
            field: 'count',
            dimension: 'item',
            as: 'percent'
          })
          _this.pieData1 = dv1.rows
          const sourceData2 = [
            { item: '开支金额', count: (overMoney/allMoney)*100 },
            { item: '其他', count: 100-(overMoney/allMoney)*100 },
          ]
          const dv2 = new DataSet.View().source(sourceData2)
          dv2.transform({
            type: 'percent',
            field: 'count',
            dimension: 'item',
            as: 'percent'
          })
          _this.pieData2 = dv2.rows


        })
    },
    // 点击选择框事件 弹出日期组件选择年
 	  openChangeYear(status) {
        if (status) {
          this.dataopen = true
        } else {
          this.dataopen = false
        }
    },
    // 选择年之后 关闭弹框
    panelChangeYear(value){
        this.queryParam.projectYear = value
        this.dataopen = false
    },

  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
